<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <div class="layui-form layui-col-space5" lay-filter="example">

                        <div class="layui-form-item">
                            <div class="layui-input-inline">
                                <select id="salaryname" lay-filter="salaryname"></select>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <table class="layui-table">
                                <tr>
                                    <td colspan="2">基本工资</td>
                                    <td><span id="basicsalary"></span></td>
                                </tr>
                                <tr>
                                    <td colspan="2">交通补助</td>
                                    <td>
                                        <span id="trafficsalary"></span>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2">午餐补助</td>
                                    <td>
                                        <span id="lunchsalary"></span>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2">奖金</td>
                                    <td>
                                        <span id="bonus">100</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td rowspan="2">养老金</td>
                                    <td>比率</td>
                                    <td><span id="pensionper"></span></td>
                                </tr>
                                <tr>
                                    <td>基数</td>
                                    <td><span id="pensionbase"></span></td>
                                </tr>
                                <tr>
                                    <td rowspan="2">医疗保险</td>
                                    <td>比率</td>
                                    <td><span id="medicalper"></span></td>
                                </tr>
                                <tr>
                                    <td>基数</td>
                                    <td><span id="medicalbase"></span></td>
                                </tr>
                                <tr>
                                    <td rowspan="2">公积金</td>
                                    <td>比率</td>
                                    <td><span id="accumulationfundper"></span></td>
                                </tr>
                                <tr>
                                    <td>基数</td>
                                    <td><span id="accumulationfundbase"></span></td>
                                </tr>
                            </table>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-inline">
                                <button class="layui-btn" lay-submit="" lay-filter="add">更改工资套账</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    /**
     *  getQueryVariable 方法这一次是将所有的参数和值放入一个Map中
     * @type {Map<any, any>}
     */
    function getQueryVariable(){
        let query = window.location.search.substring(1)
        let vars = query.split("&")
        let param = new Map()
        for(let i=0; i< vars.length; i++){
            let pair = vars[i].split("=")
            param.set(pair[0] , pair[1])
        }
        return param
    }

    /**
     *  根据账套的id进行数据的检索
     * @param sid
     */
    function findSalary( sid ){
        $.getJSON('./salary/id/'+ sid , function(object){
            let salary = object.data
            $('#basicsalary').text( salary.basicsalary )
            $('#trafficsalary').text(salary.trafficsalary)
            $('#lunchsalary').text(salary.lunchsalary)
            $('#bonus').text(salary.bonus)
            $('#pensionper').text(salary.pensionper)
            $('#pensionbase').text(salary.pensionbase)
            $('#medicalper').text(salary.medicalper)
            $('#medicalbase').text(salary.medicalbase)
            $('#accumulationfundper').text(salary.accumulationfundper)
            $('#accumulationfundbase').text(salary.accumulationfundbase)
        })
    }

    $.getJSON('./salary/all' , function(obj){
        let list = obj.data
        let html = ''
        for(let i=0; i< obj.data.length; i++){
            html += `<option value="${list[i].id}">${list[i].name}</option>`
        }
        $('#salaryname').html( html )
        $('#salaryname').val( map.get('sid') )
    })

    layui.use(['form' ,'layer'] , function(){
        let form = layui.form, layer = layui.layer
        form.on('select(salaryname)' , function(data){
            let sid = data.value
            findSalary( sid )
        })

        form.on('submit(add)' , function(data){
            let param = 'id='+ map.get('id') +'&empid='+ map.get('eid') + '&salaryid='+ $('#salaryname').val()
            $.ajax({
                type: 'PATCH',
                url : './empsalary',
                data: param,
                success: function(obj){
                    layer.alert(obj.message, function(){
                        let index = parent.layer.getFrameIndex(window.name)
                        parent.layer.close(index)
                    })
                }
            })
        })

    })

    let map = getQueryVariable()
    findSalary( map.get('sid'))


</script>
</body>
</html>